<template>
  <div class="page">
    <VueHeader/>
    <div class="mainBody vh-center">
      <ArticleContent v-bind="article_data"/>
    </div>
    <VueFooter/>
  </div>
</template>

<script>
import ArticleContent from '../../components/article_content';
import VueHeader from '../../components/header';
import NavigationBar from '../../components/navigation';
import VueFooter from '../../components/footer';
import ArtcileApi from './model/api.js';
require('../../../static/libs/vscode.css');
export default {
  name: 'ArticlePage',
  components: {
    VueHeader,
    NavigationBar,
    VueFooter,
    ArticleContent,
  },
  data () {
    return {
      article_data: {},
    };
  },
  created () {
    this.get_article();
  },
  methods: {
    get_article: async function () {
      const self = this;
      const id = this.$route.params.id;
      this.article_data = await ArtcileApi.getArticleById(id);
      this.$nextTick(function () {
        self.render_content();
      });
    },
    render_content: function () {
      const codeBlockList = document.querySelectorAll('p code');
      if (codeBlockList) {
        codeBlockList.forEach((block) => {
          window.hljs.highlightBlock(block);
        });
      }
    },
  },
};
</script>

<style>

</style>
